<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .list{
            width: 500px;
            height: 500px;
            overflow: auto;
            background-color: skyblue;
        }
        .list div{
            height: 100px;
        }
    </style>
</head>

<body>
    <script src="../React-js/17.0/react.development17.0.js" type="text/javascript"></script>
    <script src="../React-js/17.0/react-dom.development17.0.js" type="text/javascript"></script>
    <script src="../React-js/17.0/babel.min.js" type="text/javascript"></script>
    <div id="test"></div>
    <script src="package.json" type="text/javascript">
        const proxy = require('http-proxy-middleware')
        module.exports = function(app){
            app.use(
                proxy('/api1',{ //遇见/api1前缀的请求,就会触发该代理配置
                target:'http://localhost:5000', //请求转发给谁
                changeOrigin:true, //控制服务器收到的请求头中Host字段的值
                /*
                   changeOrigin 控制服务器收到的请求头中Host字段的值
                   changeOrigin 设置为true时,服务器收到的请求头中的Host为:localhost:5000
                   changeOrigin 设置为false时,服务器收到的请求头中的Host为:localhost:3000
                   changeOrigin 默认值为false,但我们一般将changeOrigin设置为true
                */
                pathRewrite:{'^/api1':''} //重写请求路径(必须)
                }),
                proxy('/api2',{
                    target:'http://localhost:5001',
                    changeOrigin:true,
                    pathRewrite:{'^/api2':''}
                })
            )
        }
    </script>   
    <script type="text/babel">
        /*
            react/vue中key的作用,为什么遍历列表时,key最好不要使用index
            1. 虚拟DOM中key的作用:
                1. 简单的说:key是虚拟DOM对象的标识,在更新显示时,Vue/React会根据key,决定是移除还是更新
                2. 详细的说:当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,
                    比较规则如下:
                    1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:
                        1. 若虚拟DOM中内容没变,直接使用之前的真实DOM
                        2. 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
                    2. 旧虚拟DOM中未找到与新虚拟DOM相同的key:
                        1. 根据数据创建新的真实DOM,随后渲染到页面
            2. 用index作为key可能会引发的问题:
                1. 若对数据进行逆序添加、逆序删除等破坏顺序操作:
                    1. 会产生没有必要的真实DOM更新===>界面效果没问题,但效率低
                2. 如果结构中还包含输入类的DOM:
                    1. 会产生错误DOM更新===>界面有问题
                3. 注意 如果不存在对元素的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key没有问题
            3. 开发中如何选择key?
                1. 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
                2. 如果确定只是简单的展示数据,用index也是可以的
        */
        class NewList extends React.Component{
            state = {
                persons:[
                    {name:'李四',id:'001'},
                    {name:'王五',id:'002'}
                ]
            }
            addPerson=()=>{
                this.setState({
                    persons:[{name:'赵六',id:'003'},...this.state.persons]
                })
            }
            render(){
                return (
                    <div>
                        <button onClick={this.addPerson}>添加</button>
                        <ul>
                            {
                            this.state.persons.map((item,index)=>{
                                return <li key={index}>{item.name} <input type="text" /></li>
                            })
                            }
                        </ul>
                        <ul>
                            {
                            this.state.persons.map((item,index)=>{
                                return <li key={item.id}>{item.name}<input type="text" /></li>
                            })
                            }
                        </ul>
                    </div>
                )
            }
        }
        ReactDOM.render(<NewList/>,document.querySelector('#test'))
    </script>
</body>
</html>